<template>
  <!-- 119数据大屏对外(无盟友) -->
  <div class="foreignDataUser">
    <div id="demoCanvas">
      <div id="demo" style="width: 1920px; height: 130px"></div>
    </div>
    <div id="demoCanvas3">
      <div id="demo3" style="height: 360px"></div>
    </div>
    <!-- 顶部 -->
    <div class="top">
      <Top type="1" />
    </div>
    <div class="bottom">
      <div class="leftBox">
        <!-- 高峰时刻 -->
        <HighlighTime type="1" />
      </div>
      <div class="centerBox">
        <!-- 地图 -->
        <Map type="1" />
      </div>
      <div class="rightBox">
        <!-- 直播统计 -->
        <!-- <LiveStatistics type="1" /> -->
      </div>
    </div>
    <div>
      <!-- 1109全天交易额统计 -->
      <TotalMoneyOut type="1" />
    </div>
    <div class="bottomBox">
      <div id="demoCanvas6">
        <div id="demo6" style="height: 100px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Top from "./top";
import HighlighTime from "./highlighTime";
import LiveStatistics from "./liveStatistics";
import AllyConnectOut from "./allyConnectOut";
import Map from "./map";
import TotalMoneyOut from "./totalMoneyOut";
import SVGA from "svgaplayerweb";
export default {
  components: {
    Top,
    HighlighTime,
    LiveStatistics,
    AllyConnectOut,
    Map,
    TotalMoneyOut,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    let height = 0;
    window.fullHeight = document.documentElement.clientHeight;
    window.fullWidth = document.documentElement.clientWidth;
    let availHeight = window.screen.availHeight; //网页正文部分上
    // 比较元素高度和屏幕高度
    if (availHeight > window.fullHeight) {
      height = availHeight;
    } else {
      height = window.fullHeight;
    }
    this.windowHeight = height; // 高
    this.windowWidth = window.fullWidth; // 宽
    document.querySelector(".foreignDataUser").style.height =
      this.windowHeight + "px";
    document.querySelector(".foreignDataUser").style.width =
      this.windowWidth + "px";
    this.$nextTick(() => {
      this.drawAnimation();
    });
  },
  methods: {
    // 数据格式化(每三位加逗号)
    toThousands(num) {
      var num = (num || 0).toString(),
        result = "";
      while (num.length > 3) {
        result = "," + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
      }
      if (num) {
        result = num + result;
      }
      return result;
    },
    // 动画
    drawAnimation() {
      var player = new SVGA.Player("#demoCanvas");
      var parser = new SVGA.Parser("#demoCanvas");
      var player = new SVGA.Player("#demo");
      var parser = new SVGA.Parser("#demo");
      let animation1 = true;
      // https://image.hezongyy.com/pcimage/svga/demo1.svga
      parser.load(
        "https://119.hezongyy.com/svga/pcimage/svga/demo1.svga",
        function (item) {
          player.loops = 1;
          player.clearsAfterStop = false;
          player.setVideoItem(item);
          player.startAnimation();
          // player.onFrame(function (i) {});
        }
      );

      var player3 = new SVGA.Player("#demoCanvas3");
      var parser3 = new SVGA.Parser("#demoCanvas3");
      var player3 = new SVGA.Player("#demo3");
      var parser3 = new SVGA.Parser("#demo3");
      // https://image.hezongyy.com/pcimage/svga/demo5.svga
      parser3.load(
        "https://119.hezongyy.com/svga/pcimage/svga/demo5.svga",
        function (item) {
          player3.loops = 0;
          player3.clearsAfterStop = false;
          player3.setVideoItem(item);
          player3.startAnimation();
          // player3.onFrame(function (i) {});
        }
      );

      var player6 = new SVGA.Player("#demoCanvas6");
      var parser6 = new SVGA.Parser("#demoCanvas6");
      var player6 = new SVGA.Player("#demo6");
      var parser6 = new SVGA.Parser("#demo6");
      // https://image.hezongyy.com/pcimage/svga/demo2.svga
      parser6.load(
        "https://119.hezongyy.com/svga/pcimage/svga/demo2.svga",
        function (item) {
          player6.loops = 0;
          player6.clearsAfterStop = false;
          player6.setVideoItem(item);
          player6.startAnimation();
          // player6.onFrame(function (i) {});
        }
      );
      setInterval(function () {
        if (animation1) {
          player.stopAnimation();
          animation1 = false;
          // console.log(0);
        } else {
          player.startAnimation();
          animation1 = true;
          // console.log(1);
        }
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
.foreignDataUser {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/bg.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
  .bottom {
    display: flex;
    justify-content: space-between;
    .leftBox {
      margin-left: 30px;
      width: 420px;
    }
  }
  .bottomImg {
    width: 100%;
    height: 39px;
    position: absolute;
    bottom: 0;
  }
  .rightBox {
    margin-right: 30px;
  }
  .leftBox {
    margin-top: 141px;
  }
  #demoCanvas {
    width: 1920px;
    height: 130px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 0;
  }

  #demoCanvas2 {
    /* width: 1920px;
            height: 260px; */
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 120px;
  }

  #demoCanvas3 {
    /* width: 1920px;
            height: 260px; */
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 0;
    opacity: 0.5;
  }
  .bottomBox {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: url(../assets/img/底部光效.png) bottom center no-repeat;
    #demoCanvas6 {
      height: 100px;
      overflow: hidden;
    }
  }
}
</style>